<template>
  <el-header>
    <slot name="header-left">
      <page-header/>
    </slot>
    <slot name="header-right">
      <avatar-menu
        :menu-item="menuItem">
      </avatar-menu>
    </slot>
  </el-header>
</template>

<script>
import AvatarMenu from "@/layouts/header/AvatarMenu.vue";
import {mapState} from "vuex";
import PageHeader from "@/layouts/header/PageHeader.vue";

export default {
  name: 'Header',
  components: {
    PageHeader, AvatarMenu
  },
  computed: {
    ...mapState(['currentUser'])
  },
  data() {
    return {
      menuItem: [
        {
          content: '个人信息',
          icon: "el-icon-user",
          command: {
            // 传递点击的回调函数
            handleClick: () => {
              this.$router.push("/dashboard/person");
            }
          }
        },
        {
          content: '首页',
          icon: "el-icon-s-home",
          command: {
            handleClick: () => {
              this.$router.push({name: 'Home'});
            }
          }
        },
        {
          content: '退出登录',
          icon: "el-icon-close",
          divided: true,
          command: {
            handleClick: () => {
              this.$confirm('确定退出登录?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                // 点击确认
                localStorage.removeItem("current-user");
                this.$router.push("/");
              }).catch(() => {
                // 点击取消
              });
            }
          }
        },
      ],
    }
  }
};
</script>

<style scoped>
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
}
</style>
